<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>支付页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="../comm/bootstrap-4.4.1-dist/css/bootstrap.css">
		<link rel="stylesheet" href="../comm/font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../css/header.css">
		<link rel="stylesheet" href="../css/footer.css">
		<style>
			/* 支付密码输入框效果 */
			.pwd-box{
				width: 248px;
				height: 42px;
				border: 1px solid gray;
				float: left;
				line-height: 40px;
				
			}
			.pwd-box > div:last-child > input{
				border: 0;
			}
			.pwd-div{
				width: 40px;
				height: 40px;
				border: 1 solid #007BFF;
				/* margin: 2px; */
				float: left;
				padding-bottom: 2px;
				margin-right: 1px;
			}
			.pwd-input{
				width: 40px;
				height: 38px;
				border-width: 0;
				border-right: 1px dashed darkgray;
				text-align: center;
			}
			.pwd-input:focus{
				border-right: 0px ;
			}
			/* 订单图片大小 */
			.money-icon{
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 10px;
				text-align: center;
				line-height: 20px;
				background-color: orange;
				color: white;
				font-size: 0.7rem;
				font-style: normal;
			}
			.zhifu-img{
				height: 80px;
			}
		</style>
	</head>
	<body>
		<!-- 支付页面内容 -->
		<div class="container mt-5 pt-5 mb-5">
			<div class="row  border p-3">
				<div class="col-lg-2">
					<img src="../img/mdnl/B6791/B6791blue.jpg" class="zhifu-img" alt="">
				</div>
				<div class="col-lg-7">
					<p id="p_orderId"></p>
					<p>LagouPhone</p>
					<p>店铺：Mirror官方旗舰店</p>
				</div>
				<div class="col-lg-3">
					1300元
					<p></p>
				</div>
			</div>
			<div class="row border border-top-0">
				<div class="col-lg-12 p-3">
					<div class="border border-info p-3 overflow-hidden flex-row justify-content-between align-content-center">
						<div class="float-left">
							<input type="radio" id="check-user-access" checked="checked">
							<i class="money-icon">￥</i>
							<span>账户余额 ****.**元</span>
						</div>
						<div class="float-right">支付1300元</div>
					</div>
				</div>
				<div class="col-lg-12">
					<img src="../img/pay/true.png" alt="">安全设置检查成功
				</div>
				<div class="col-lg-12">支付密码：</div>
				<div class="col-lg-12">
					<div class="pwd-box">
						<div class="pwd-div">
							<input type="password" class="pwd-input" maxlength="1" value="1">
						</div>
						<div class="pwd-div">
							<input type="password" class="pwd-input" maxlength="1" value="1">
						</div>
						<div class="pwd-div">
							<input type="password" class="pwd-input" maxlength="1" value="1">
						</div>
						<div class="pwd-div">
							<input type="password" class="pwd-input" maxlength="1" value="1">
						</div>
						<div class="pwd-div">
							<input type="password" class="pwd-input" maxlength="1" value="1">
						</div>
						<div class="pwd-div">
							<input type="password" class="pwd-input" maxlength="1" value="1">
						</div>
					</div>
					
				</div>
				<div class="col-lg-12 help-block text-secondary">请输入6位数字密码</div>
				<div class="col-lg-12">
					<button class="btn btn-success border-circle-no"   onclick="pay()">确认支付</button>
				</div>	
			</div>
		</div>
		<!-- 支付成功的模态框 -->
		<div class="modal" tabindex="-1" role="dialog" id="zhifumodal">
			<div class="modal-dialog modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">
							<img src="../img/logo-black.png" alt="">
						</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body text-center">
						<img src="../img/pay/true2.png" alt="">
						<span id="span_pay"></span>
					</div>
					<div class="modal-footer login-modal-footer">
						<!--<button type="button" class="btn btn-outline-info">查看订单</button>
						<button type="button" class="btn btn-outline-info">继续购物</button>-->
					</div>
				</div>
			</div>
		</div>

		<script src="../js/jquery.js"></script>
		<script src="../comm/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
		<script src="../js/header.js" type="text/javascript"></script>

	</body>

<script>
	var id = getUrlParam("id");
	$(function(){
		//var id = getUrlParam("id");

		$("#p_orderId").html("订单号："+id);
	});


	function getUrlParam(name) {

		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

		var r = window.location.search.substr(1).match(reg);  //匹配目标参数

		if (r != null) return unescape(r[2]);

		return null; //返回参数值

	}

	function pay() {
		$.ajax({
			url: 'http://169.254.146.89:80/pay/'+id,
			type: 'post',
			dataType: 'json',
			success: function (data) {

				if(data == 1){
					alert("支付成功");
				}else{
					alert("支付超时");
				}
			}
		})
	}

</script>
</html>
